
<template>
  <el-main>
    <el-card style="margin-bottom: 20px" class="card">
      <sc-select-filter
        v-if="filterData.length > 0"
        :data="filterData"
        :label-width="80"
        @on-change="filterChange"
      ></sc-select-filter>
      <div
        style="display: flex; justify-content: space-between; padding-top: 10px"
      >
        <div class="left-panel">
          <template v-for="(item3, index) in leftToolbars" :key="index">
            <buttonGroupWidget
              :item="item3"
              @confirmDelClick="confirmDelClick"
              @openDialog="openDialog"
              @rowAdd="rowAdd"
            ></buttonGroupWidget>
          </template>
        </div>
        <div class="right-panel">
          <div class="right-panel-search">
            <el-input
              v-model="form.name"
              placeholder="模块名称"
              clearable
              :prefix-icon="Search"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="getTableData"
            ></el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-scrollbar :max-height="h">
    <el-row style="width: 100%;" :gutter="15">
      <el-col
        :xl="6"
        :lg="6"
        :md="8"
        :sm="12"
        :xs="24"
        v-for="(item,index) in tableData"
        :key="index"
      >
        <el-card class="task task-item" shadow="hover">
          <div class="image-container">
            <el-image
              class="mainImage"
              fit="cover"
              :src="item.imgSrc"
            ></el-image>
            <div class="mask-text">{{ item.moduleId }}</div>
          </div>
          <div style="display: flex;justify-content: space-between">
            <template
                  v-for="(item2,index2) in tableConfig"
                  :key="index2"
                >
              <div v-if="item2.template !== null">
                <template
                  v-for="(nodeItem,index3) in item2.template.nodes"
                  :key="index3"
                >
                  <span-link-widget
                  class="title"
                    v-if="nodeItem.component === 'spanLink'"
                    :nodeItem="nodeItem"
                    :scope="item"
                    :prop="item2.prop"
                    @openDialog =openDialog
                  ></span-link-widget>
                </template>
              </div>
              </template>
            <el-tag
              style="margin-bottom: 2px; margin-right: 2px"
              :type="item.status === '启用' ? success : danger"
              >{{ item.status }}</el-tag
            >
          </div>
          <div class="bottom">
            <span style="font-size: 13px">{{ item.catalogId }}</span>
            <div class="handler">
              <el-dropdown trigger="click">
                <el-button
                  type="primary"
                  icon="el-icon-more"
                  circle
                  plain
                  small
                ></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <div style="display: flex; flex-direction: column">
                      <template v-for="(item3, index) in toolbars" :key="index">
                        <buttonGroup-widget
                          commpoentType="dropdownMenu"
                          :selectData="item"
                          :item="item3"
                          @confirmDelClick="confirmDelClick"
                          @openDialog="openDialog"
                          @rowAdd="rowAdd"
                        ></buttonGroup-widget>
                      </template>
                    </div>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-scrollbar>
  </el-main>
  <el-row>
    <div class="table-pagination" ref="pagination">
      <!-- 20 -->
      <div v-if="JSON.stringify(tablePage) !== '{}'">
        <el-pagination
          small="true"
          :total="tableRows"
          v-model:page-size="pageSize"
          v-model:current-page="pageNo"
          :page-sizes="tablePage.pageSize"
          @current-change="pageChange"
          @size-change="handleSizeChange"
          layout="jumper,sizes,total,prev, pager, next,"
        >
        </el-pagination>
      </div>
      <div class="pagination-right">
        <el-button @click="tableExport" type="small">
          <i class="iconfont icon-xiazai"></i> 导出
        </el-button>
        <div @click="isRefresh(true)" style="margin-left: 10px">
          <el-button :icon="Refresh" circle></el-button>
        </div>
        <div @click="changeTableHeight" style="margin-left: 10px">
          <el-icon v-show="!tableMax" size="20px">
            <FullScreen />
          </el-icon>
          <el-icon v-show="tableMax" size="20px">
            <Minus />
          </el-icon>
        </div>
      </div>
    </div>
  </el-row>
  <div class="dialog"></div>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted,
  nextTick,
  render,
  createVNode,
  computed,
} from "vue";
import { useRoute } from "vue-router";
import { ElNotification, ElMessageBox } from "element-plus";
import {
  Plus,
  Delete,
  Edit,
  Reading,
  Minus,
  FullScreen,
  Refresh,
  Search,
  Upload,
  Printer,
} from "@element-plus/icons-vue";
import { parameterParsing } from "@/utils/parsing";
import Api from "@/api/model/system";
import tsLayer from "@/utils/useDialog";
import "./field-widget/index";
import { checkType } from "@/utils/checkType";
import scSelectFilter from "@/components/scSelectFilter";
import spanLinkWidget from "./field-widget/spanLink-widget.vue";
import buttonGroupWidget from './field-widget/buttonGroup-widget.vue'
const instance = getCurrentInstance();
const route = useRoute();
const tableData = ref([]);
const tableConfig = ref([]);
const leftToolbars = ref([]);
const toolbars = ref([]);
const fileName = ref();
const pageNo = ref(1);
const pageSize = ref(20);
const tableRows = ref(0);
const tablePage = ref({});
const form = ref({});
const fuzzyQuery = ref(true);
const filterData = ref([]);
onMounted(() => {
  let path = route.path.split("/");
  if (path[2] !== undefined) {
    fileName.value = path[2];
  } else if (route.query.fileName) {
    fileName.value = route.query.fileName;
  }
  if (route.query.data !== undefined) {
    form.value = parameterParsing(route.query.data);
  }
  getInit();
});
const h =computed(()=>{
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  let height
    if (!iOS) {
       height = window.innerHeight;
    } else {
      height = screen.height;
    }
    return height -295;
})
const getWidgetName = (widget) => {
  return widget + "-widget";
};
const getInit = async () => {
  let params = {
    fileName: fileName.value,
  };
  let res = await Api.report.selectCompanyList.post(params);
  console.log(res);
  if (res.code == 200) {
    tableConfig.value = res.bean.table.columns; //表格列
    filterData.value = res.configData;
    if (res.bean.table.page !== null) {
      tablePage.value = res.bean.table.page;
      pageSize.value = res.bean.table.page.page;
    }
    if (res.bean.toolbarGroup !== null) {
      leftToolbars.value = res.bean.toolbarGroup.toolbars.filter((ele) => {
        return ele.chooseRows === "0";
      });
      toolbars.value = res.bean.toolbarGroup.toolbars.filter((ele) => {
        return ele.chooseRows !== "0";
      });
    }
    //判断是否初始化显示表格数据
    nextTick(() => {
      getTableData();
    });
  }
};
const filterChange = (val) => {
  Object.assign(form.value, val);
  getTableData();
};
const getTableData = async () => {
  var params = {
    fileName: fileName.value,
    fieldMap: form.value,
    fuzzyQuery: fuzzyQuery.value,
    pageSize: pageSize.value,
    pageNo: pageNo.value, //1
  };
  var res = await Api.select.query.post(params);
  if (res.code == 200) {
    tableRows.value = res.rows;
    tableData.value = res.reportData;
    // columnIndex.value += 1
  }
};
// 刷新
const isRefresh = (val) => {
  if (val) {
    getTableData();
  }
};
// 确认删除
const confirmDelClick = async (url, id) => {
  const res = await Api.systemDelete.post(url, id);
  if (res.code == 200) {
    if (res.optType == "exportFile") {
      window.open(res.data);
    } else {
      ElNotification.success({ title: "", message: "成功！", duration: 2000 });
      getTableData();
    }
  }
};
const openDialog = (item, paramsData) => {
  const box = document.querySelector(".dialog");
  render(null, box);
  let path;
  if (paramsData.url !== "" && paramsData.url !== undefined) {
    path = paramsData.url;
  } else {
    path = item.url;
  }
  import(`@/views${path}`).then((res) => {
    const form = createVNode(res.default, {
      paramsData,
      onUpdatetable(val) {
        render(null, box);
        if (val == true) {
          getTableData();
        }
      },
    });
    tsLayer.open({
      title: item.title||item.name,
      width: item.width,
      fullScreen: item.fullscreen,
      appContext: instance.appContext,
      box: box,
      content: form,
    });
  });
};
</script>

<style scoped lang="scss">
.card {
  :deep(.el-card__body) {
    padding-bottom: 0px;
  }
}
.table-pagination {
  width: 100%;
  // width: 90%;
  height: 65px;
  float: right;
  position: fixed;
  bottom: 0px;
  border-top: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
  background: white;
}

// .pagination-container{
//     // float: right;

// }
.pagination-right {
  display: flex;
  align-items: center;
  margin-right: 20%;
}

.task {
  height: auto;
  border-radius: 12px;
  :deep(.el-card__body) {
    padding: 0%;
  }
}

.task-item .bottom {
  border-top: 1px solid #ebeef5;
  text-align: right;
  padding: 0.25rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-add:hover {
  color: #409eff;
}

.task-add i {
  font-size: 30px;
}

.dark .task-item .bottom {
  border-color: var(--el-border-color-light);
}
.image-container {
  position: relative;
}
.mainImage {
  transition: transform 0.3s ease-in-out;
}
.mainImage :hover {
  transform: scale(1.05);
}
.mask-text {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s;
}
.title {
  font-size: 14px;
  line-height: 1rem;
  height: 1.5rem;
  overflow: hidden;
  display: block;
  color: #34495e;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0.25rem 0.5rem;
}
.right-panel {
  margin-bottom: 20px;
}
</style>
